<template>
	<view class="diary-list">
		<scroll-view class="diary-list-main" scroll-y>
			<view class="no-list" v-if="(!listData || listData.length == 0) && type == 1">
				你的好友们还没有写过日记
				<br />
				快推荐写下第一篇日记分享给你吧..
			</view>
			<view class="no-list" v-if="(!listData || listData.length == 0) && type == 0">
				你还没有写过日记
				<br />
				快编写你的第一篇日记吧..
			</view>
			<view v-for="(item, index) in listData" :key="index" class="diary-bg-box">
				<view class="diary-box-title">
					<view>{{ item.title }}</view>
					<view class="my-flex"></view>
					<view>{{ item.list.length }}篇</view>
				</view>
				<view v-for="(o, i) in item.list" :key="i" class="diary-box-item">
					<view style="width: 96%;height: 1px;background: #eee; margin-left: 4%;" />
					<view class="diary-item" @tap="go(o.diary_id)" @longtap="deleteDiary(o)">
						<view class="diary-title">{{ o.title }}</view>
						<p class="diary-content">{{ o.content }}</p>
						<view class="diary-other">
							<label>{{ o.create_date }}</label>
							<label class="author">{{ o.author }}</label>
						</view>
					</view>
				</view>
			</view>

			<view class="uni-load-more" v-show="listData.length > 0">
				<uni-load-more
					:loadingType="loadingType"
					:contentText="contentText"
				></uni-load-more>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more';
import { mapActions, mapGetters } from 'vuex';
import { delParams } from '@/utils/sql';
export default {
	components: { uniLoadMore },
	data() {
		return {
			type: 0,
			pageIndex: 0,
			pageSize: 10,
			loadingType: 1,
			contentText: {
				contentdown: '上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			list: [],
			listData: []
		};
	},
	async onLoad(option) {
		this.showLoading('加载中..', true);
		this.type = option.type == 1 ? 1 : 0;
		if (this.type == 1) {
			uni.setNavigationBarTitle({
				title: '朋友日记'
			});
		} else {
			uni.setNavigationBarTitle({
				title: '我的日记'
			});
		}
		await this.initData();
		this.hideLoading('加载中..', true);
	},
	onReachBottom() {
		if (this.loadingType !== 0) {
			return;
		}
		this.loadMore();
	},
	async onPullDownRefresh() {
		await this.initData();
		uni.stopPullDownRefresh();
	},
	methods: {
		go(id) {
			if (this.type == 0) {
				uni.navigateTo({ url: '/pages/diary-add/diary-add?id=' + id });
			} else {
				uni.navigateTo({ url: '/pages/diary-show/diary-show?id=' + id });
			}
		},
		deleteDiary(diary) {
			if (this.type == 1) {
				return;
			}
			uni.showActionSheet({
				itemList: ['删除'],
				success: e => {
					if (e.tapIndex == 0) {
						// 删除
						this.showLoading('删除中..');
						this.$api['data/del'](delParams('diary', diary.diary_id)).then(
							({ data, code, msg }) => {
								this.hideLoading();
								if (code == 0 && data > 0) {
									this.success('删除成功');
									let index = this.list.indexOf(diary);
									if (index > -1) {
										this.list.splice(index, 1);
									}
									this.updateListData();
								} else {
									this.msg('删除失败');
								}
							}
						);
					}
				}
			});
		},
		updateListData() {
			this.listData = [];
			let temp = null;
			this.list.forEach(element => {
				// 显示emoji标签
				element.content = this.showEmoji(element.content);
				element.title = this.showEmoji(element.title);
				element.weather = this.showEmoji(element.weather);
				if (this.listData.length == 0) {
					temp = element.create_date.substr(0, 7);
					this.listData.push({
						title: element.create_date.substr(0, 7).replace('-', '年') + '月',
						list: []
					});
				}
				if (temp == element.create_date.substr(0, 7)) {
					this.listData[this.listData.length - 1].list.push(element);
				} else {
					temp = element.create_date.substr(0, 7);
					this.listData.push({
						title: element.create_date.substr(0, 7).replace('-', '年') + '月',
						list: []
					});
					this.listData[this.listData.length - 1].list.push(element);
				}
			});
		},
		initData() {
			return new Promise((resolve, reject) => {
				this.pageIndex = 0;
				this.list = [];
				this.loadingType = 1;
				this.getList().then(() => {
					this.loadingType = this.loadingType == 2 ? 2 : 0;
					resolve();
				});
			});
		},
		loadMore() {
			this.loadingType = 1;
			this.getList().then(() => {
				this.loadingType = this.loadingType == 2 ? 2 : 0;
			});
		},
		getList() {
			return new Promise((resolve, reject) => {
				if (this.type == 0) {
					this.$api['fun/diaryMyListPage']({
						index: this.pageIndex * this.pageSize,
						size: this.pageSize
					}).then(({ data, code, msg }) => {
						if (code == 0) {
							this.list = this.list.concat(data);
							if (data.length < this.pageSize) this.loadingType = 2;
							else this.pageIndex++;
							this.updateListData();
						} else {
							this.msg('获取数据出错');
						}
						resolve();
					});
				} else {
					this.$api['fun/diaryFriendListPage']({
						index: this.pageIndex * this.pageSize,
						size: this.pageSize
					}).then(({ data, code, msg }) => {
						if (code == 0) {
							this.list = this.list.concat(data);
							if (data.length < this.pageSize) this.loadingType = 2;
							else this.pageIndex++;
							this.updateListData();
						} else {
							this.msg('获取数据出错');
						}
						resolve();
					});
				}
			});
		}
	},
	computed: {
		...mapGetters(['wxInfo', 'userInfo'])
	}
};
</script>

<style lang="scss">
page {
	background: #f5f5f5;
}
.diary-list {
	height: 100%;
	.diary-list-main {
		height: 100%;
		background: #f5f5f5;
		// padding: 10px;
		.no-list {
			position: fixed;
			text-align: center;
			left: 0;
			right: 0;
			height: 140px;
			top: 35%;
			line-height: 1.6;
			font-size: 16px;
		}

		.diary-bg-box {
			background: #fff;
			border-radius: 10px;
			margin: 10px;
			border: 0.8px solid rgba(0, 0, 0, 0.05);
			box-sizing: border-box;
			padding: 5px 0;
			.diary-box-title {
				padding: 5px 15px;
				color: #efa71c;
				display: flex;
			}
			.diary-box-item {
				.diary-item {
					padding: 15px 0 15px 15px;
					&:active {
						background: #f5f5f5;
					}
					.diary-title {
						height: 28px;
						line-height: 28px;
						font-size: 15px;
						font-weight: 600;
						color: #000;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						max-width: 80%;
					}
					.diary-content {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						margin: 0;
						color: #666;
						font-size: 14px;
						height: 24px;
						line-height: 24px;
						max-width: 85%;
					}
					.diary-other {
						height: 24px;
						line-height: 24px;
						color: #999;
						.author {
							float: right;
							margin-right: 15px;
							color: #888;
						}
					}
				}
			}
		}
	}
}
</style>
